<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        body{
            perspective: 1000px;
        }
        .box{
            width: 400px;
            height: 200px;
            animation: rotates 8s infinite linear;
            position: relative;
            transform-style: preserve-3d;
        }

        .box:hover{
            animation-play-state: paused;
        }

        .box>div{
            position: absolute;
            left: 0;
            top: 0;
            width: 400px;
            height: 200px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        /* 注意下面的图片是没有放在目录里的，所以使用时请换成你自定义的图片地址 */
        .box>.pic1{
            background-image: url(../00-imgs/2022星之守护者/卡莎.jpg);
            transform: translateZ(400px);
        }

        .box>.pic2{
            background-image: url(../00-imgs/2022星之守护者/奥利安娜.jpg);

            /* 由于有五张图片，先移动后旋转有些不好计算，所以我们先旋转后移动 */
            transform: rotateY(-72deg) translateZ(400px);
        }

        .box>.pic3{
            background-image: url(../00-imgs/2022星之守护者/娑娜.jpg);
            transform: rotateY(-144deg) translateZ(400px);
        }
 
        .box>.pic4{
            background-image: url(../00-imgs/2022星之守护者/萨勒芬妮.jpg);
            transform: rotateY(144deg) translateZ(400px);
        }
 
        .box>.pic5{
            background-image: url(../00-imgs/2022星之守护者/辛德拉-至臻.jpg);
            transform: rotateY(72deg) translateZ(400px);
        }
        @keyframes rotates{
            0%{

            }

            100%{
                transform: rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic1"></div>
        <div class="pic2"></div>
        <div class="pic3"></div>
        <div class="pic4"></div>
        <div class="pic5"></div>
    </div>
</body>
</html>